<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="js/Cesium.js"></script>
    <style>
        @import url(css/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .canvas {
            position: absolute;
            left: 10px;
            top: 10px;
            display: none;
        }

        #canvas-a {
            top: 10px;
        }

        #canvas-b {
            top: 120px;
        }
    </style>
</head>

<body>
<button onClick="rotatex()">rotatex</button>
<button onClick="rotatey()">rotatey</button>
<button onClick="rotatez()">rotatez</button>
<div id="cesiumContainer" class="fullSize">
    <div id="cesiumxin" style="position:fixed;left:0;z-index:99">
    </div>
</div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script>


    var czml = [
        {
            "id": "document",
            "name": "CZML Point - Time Dynamic",
            "version": "1.0"
        },
        {
            "id": "dongchengqu",
            "name": "东城区AQI",
            "availability": "2016-01-01T00:00:00Z/2016-01-02T00:00:00Z",
            "polygon": {
                "positions": {
                    "cartographicDegrees":
                        [116.4436, 39.8728, 0, 116.443, 39.8719, 0, 116.4269, 39.8727, 0, 116.422, 39.8724, 0, 116.4169, 39.8715, 0, 116.4158, 39.8694, 0, 116.4152, 39.8671, 0, 116.4158, 39.8658, 0, 116.4144, 39.8637, 0, 116.4125, 39.8589, 0, 116.4042, 39.8597, 0, 116.3955, 39.8587, 0, 116.395, 39.8621, 0, 116.3943, 39.8626, 0, 116.3923, 39.8637, 0, 116.3879, 39.866, 0, 116.3853, 39.8671, 0, 116.3807, 39.8661, 0, 116.3777, 39.8667, 0, 116.3787, 39.867, 0, 116.3796, 39.868, 0, 116.3848, 39.8715, 0, 116.3985, 39.8802, 0, 116.3981, 39.891, 0, 116.3976, 39.8987, 0, 116.3961, 39.8994, 0, 116.3956, 39.908, 0, 116.3918, 39.9112, 0, 116.3921, 39.9129, 0, 116.3968, 39.9235, 0, 116.3967, 39.9283, 0, 116.3942, 39.9443, 0, 116.3877, 39.9609, 0, 116.3987, 39.9626, 0, 116.4014, 39.9624, 0, 116.4055, 39.9619, 0, 116.4077, 39.9666, 0, 116.4074, 39.9697, 0, 116.4076, 39.9714, 0, 116.4088, 39.9725, 0, 116.4122, 39.9638, 0, 116.4254, 39.9592, 0, 116.429, 39.9573, 0, 116.429, 39.9543, 0, 116.43, 39.9519, 0, 116.4299, 39.951, 0, 116.4295, 39.9502, 0, 116.434, 39.9499, 0, 116.4348, 39.949, 0, 116.4368, 39.9497, 0, 116.4354, 39.9521, 0, 116.4393, 39.9512, 0, 116.4422, 39.9491, 0, 116.4407, 39.9471, 0, 116.4393, 39.9471, 0, 116.4394, 39.9461, 0, 116.4411, 39.9451, 0, 116.442, 39.9451, 0, 116.4426, 39.9457, 0, 116.4447, 39.9462, 0, 116.4469, 39.9457, 0, 116.4472, 39.9449, 0, 116.4464, 39.9427, 0, 116.4449, 39.9418, 0, 116.4445, 39.9392, 0, 116.4437, 39.9367, 0, 116.439, 39.9286, 0, 116.4375, 39.9286, 0, 116.4347, 39.9212, 0, 116.4351, 39.9134, 0, 116.4358, 39.9068, 0, 116.4365, 39.902, 0, 116.438, 39.9026, 0, 116.4416, 39.903, 0, 116.4461, 39.9032, 0, 116.448, 39.9012, 0, 116.4468, 39.8981, 0, 116.4509, 39.8929, 0, 116.4504, 39.8902, 0, 116.4474, 39.8912, 0, 116.4441, 39.89, 0, 116.4456, 39.8789, 0, 116.4443, 39.8758, 0]
                },
                "material": {
                    "solidColor": {
                        "color": {
                            "epoch": "2016-01-01T00:00:00Z",
                            "rgba": [
                                0, 255, 255, 0, 255,
                                36000, 255, 126, 0, 255,
                                72000, 255, 0, 0, 255,
                                86400, 153, 0, 76, 255
                            ]

                        }
                    }
                },
                "perPositionHeight": false,

                "extrudedHeight": {
                    "epoch": "2016-01-01T00:00:00Z",
                    "number": [
                        0, 1000,
                        10800, 1255,
                        21600, 1430,
                        43200, 1580,
                        86400, 2350]
                }
            }
        }
    ];

    var viewer = new Cesium.Viewer('cesiumContainer');
    var dataSource = Cesium.CzmlDataSource.load(czml);
    viewer.dataSources.add(dataSource);
    viewer.flyTo(dataSource);

</script>
</body>

</html>